<template>
  <a-row>
    <a-col :span="4" class="avatarContainer">
      <div class="avatar">
        <img :src="profile.avatarUrl" width="100%"
             height="100%"/>
      </div>
    </a-col>
    <a-col :span="10" class="nickName" @click="login">
      <label v-if="loginStatus">{{profile.nickname}}</label>
      <label v-else style="text-align: center;position:relative;">登录</label>
    </a-col>

    <a-col :span="2">
      <div class="drop-down">
        <img src="@/assets/drop-down.png" width="15" height="15"/>
      </div>
    </a-col>

    <a-col :span="3">
      <div class="mailContainer">
        <a-icon type="mail" :style="{color:'white'}"/>
      </div>
    </a-col>
    <a-col :span="3" class="">
      <div class="mailContainer">
        <a-icon type="skin" :style="{color:'white'}"/>
      </div>
    </a-col>
  </a-row>

</template>

<script>
import Vue from "vue"
import {mapActions} from "vuex"

import {USER_ACCOUNT, USER_PROFILE,USER_COOKIE} from "@/store/mutation-types";

export default {
  name: "user",
  props: {
    showLoginPage: {
      type: Object
    }
  },
  components: {},
  data() {
    return {
      account: {},
      profile: {},
      loginStatus: false
    }
  },
  beforeMount() {
    if (Vue.ls.get(USER_ACCOUNT) && Vue.ls.get(USER_PROFILE) ){
      this.$store.commit('SET_ACCOUNT', Vue.ls.get(USER_ACCOUNT))
      this.$store.commit('SET_PROFILE', Vue.ls.get(USER_PROFILE))
      this.$store.commit('SET_COOKIE', Vue.ls.get(USER_COOKIE))
      this.showInfo();
    }

    // let params = {
    //   'cookie':Vue.ls.get(USER_COOKIE)
    // }
    // console.log('cookie',Vue.ls.get(USER_COOKIE))
    // this.getLoginStatus(params).then(res=>{
    //   console.log(res)
    // })
    // this.loginRefresh().then(res=>{
    //   console.log(res)
    // })
    // if (this.$store.getters.account){
    //   console.log('showInfo')
    //   this.showInfo()
    // }
    // console.log(Vue.ls.get("user_cookie"))
  },
  methods: {
    ...mapActions(["getLoginStatus","loginRefresh"]),
    settings() {
      console.log("设置")
    },
    login() {
      // 检查是否登录，未登录则显示登录页面，已登录则显示下拉框
      if (this.loginStatus) {
        // 显示下拉框
      } else {
        // 显示登录页面
        this.$emit("showLoginPage")
      }
    },
    showInfo() {
      this.account = this.$store.getters.account
      this.profile = this.$store.getters.profile
      this.loginStatus = true
    }
  }
}
</script>

<style scoped>
.avatarContainer {
  display: inline-block;
  height: 2.2rem;
  text-align: right;
  position: relative;
}

.avatar {
  width: 1.8rem;
  height: 1.8rem;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.nickName {
  display: inline-block;
  height: 2.2rem;
  line-height: 2.2rem;
  cursor: pointer;
  position: relative;
}

.nickName > label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: white;
  cursor: pointer;
  position: absolute;
  left: 0.2rem;
}

.drop-down {
  display: inline-block;
  padding-top: 0.4rem;
  cursor: pointer;
}

.mailContainer {
  width: 2.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
  cursor: pointer;
}


</style>
